<% let showToc = toc.length > 0%>
<% let scheme = site.customConfig.scheme || 'pisces'; let siteBar = site.customConfig.siteBar;%>
<div class="sidebar">
  <% if (!(siteBar === 'hide' || siteBar === 'toc' && !showToc)) {%>
    <div class="sidebar-box box-shadow-wrapper <%= (scheme === 'muse' || scheme === 'mist')?'':'bg-color' %> right-motion" id="sidebar">
      <% if (siteBar === 'auto') { %>
        <div class="post-list-sidebar">
          <div class="sidebar-title">
            <span id="tocSideBar" class="sidebar-title-item sidebar-title-active language" data-lan="index">文章目录</span>
            <span id="metaSideBar" class="sidebar-title-item language" data-lan="preview">站点概览</span>
          </div>
        </div>
      <% } %>
      <div class="sidebar-body <%= scheme !==''?scheme:'pisces' %>" id="sidebar_body">
        <% if (siteBar === 'toc') { %>
          <% if (showToc) { %>
            <div style="opacity: 1;">
              <%- include('./toc', {toc: toc}) %>
            </div>
          <% } %>
        <% } else if (siteBar === 'sitemeta') { %>
          <%- include('./site-meta') %>
        <% } else if (siteBar === 'auto') { %>
          <% if (showToc) { %>
            <div class="post-side-meta" id="post_side_meta">
              <%- include('./site-meta') %>
            </div>
            <div class="post-toc sidebar-body-active" id="post_toc" style="opacity: 1;">
              <%- include('./toc', {toc: toc}) %>
            </div>
          <% } else {%>
            <%- include('./site-meta') %>
          <% } %>
        <% } %>
      </div>
    </div>
  <% } %>
</div>
<script>
  const SIDEBAR_TITLE_ACTIVE = 'sidebar-title-active';
  const SIDEBAR_BODY_ACTIVE = 'sidebar-body-active';
  const SLIDE_UP_IN = 'slide-up-in';

  let sidebar = document.querySelector('#sidebar'),
  tocSideBar = document.querySelector('#tocSideBar'),
  metaSideBar = document.querySelector('#metaSideBar'),
  postToc = document.querySelector('#post_toc'),
  postSiteMeta = document.querySelector('#post_side_meta'),
  sidebarTitle = document.querySelector('.sidebar-title'),
  sidebarBody = document.querySelector('#sidebar_body');

  tocSideBar && tocSideBar.addEventListener('click', (e) => {
    toggleSidebar(e);
  });

  metaSideBar && metaSideBar.addEventListener('click', (e) => {
    toggleSidebar(e);
  });

  function toggleSidebar(e) {
    let currentTitle = document.querySelector("."+SIDEBAR_TITLE_ACTIVE);
    if (currentTitle == e.srcElement) {
      return ;
    }
    let current, showElement, hideElement;
    if (e.srcElement == metaSideBar) {
      showElement = postSiteMeta;
      hideElement = postToc;
    } else if (e.srcElement == tocSideBar){
      showElement = postToc;
      hideElement = postSiteMeta;
    }
    currentTitle.classList.remove(SIDEBAR_TITLE_ACTIVE);
    e.srcElement.classList.add(SIDEBAR_TITLE_ACTIVE);

    jQuery.Velocity(hideElement, 'stop');
    jQuery.Velocity(hideElement, 'transition.slideUpOut', {
      display: 'none',
      duration: 200,
      complete: function () {
        jQuery.Velocity(showElement, 'transition.slideDownIn', {
          duration: 200
        });
      }
    })
    hideElement.classList.remove(SIDEBAR_BODY_ACTIVE);
    showElement.classList.add(SIDEBAR_BODY_ACTIVE);
  }

  postToc && postToc.addEventListener('transitionend', function() {
    this.classList.remove(SLIDE_UP_IN);
  });

  if (sidebarBody) {
    if (sidebarBody.classList.contains('pisces') || sidebarBody.classList.contains('gemini')) {
      let hasFix = false;
      let scrollEl = document.querySelector('.main-continer');
      let limitTop = document.querySelector('#nav_ul').children.length * 42 + 162;
      window.addEventListener('scroll', function(e) {
        if (document.scrollingElement.scrollTop >= limitTop) {
          if (!hasFix) {
            sidebar.classList.add('sidebar-fixed');
            hasFix = true;
          }
        } else {
          if (hasFix) {
            sidebar.classList.remove('sidebar-fixed');
            hasFix = false;
          }
        }
      });
    }
  }
  
</script>